<template>
  <div class="pagination">
    <el-pagination
      size="small"
      background
      @size-change="handleSizeChangeFun"
      @current-change="handleCurrentChangeFun"
      :current-page="props.tablePagination.page"
      :page-sizes="[10, 20, 50, 75, 100]"
      :page-size="props.tablePagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.total"
    >
    </el-pagination>
  </div>
</template>
<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue';

const props = defineProps({
  tablePagination: {
    type: Object,
    required: true,
  },
  total: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits<{
  (e: 'handleSizeChange', size: number): void;
  (e: 'handleCurrentChange', page: number): void;   
}>();

const handleSizeChangeFun = (size: number) => {
  emit('handleSizeChange', size)
}

const handleCurrentChangeFun = (page: number) => {
  emit('handleCurrentChange', page)
}
</script>

<style lang="scss" scoped></style>